<template>
	<div>
		<el-row>
			<el-form class="demo-ruleForm">
				<el-col :span="6">
					<el-input v-model="params.keyword" placeholder="请输入门店名称/公司名称"></el-input>
				</el-col>
				<el-col :span="4">
					<el-input v-model="params.province" placeholder="请输入省份"></el-input>
				</el-col>
				<el-col :span="4">
					<el-input v-model="params.city" placeholder="请输入城市"></el-input>
				</el-col>
				<el-col :span="4">
					<el-input v-model="params.area" placeholder="请输入区县"></el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="queryClick">查询</el-button>
				</el-col>
			</el-form>
		</el-row>
		<el-row>
			<el-table :data="tableData" style="width: 100%" :height="790">
				<el-table-column label="门店代码" prop="shopId" width="120"></el-table-column>
				<el-table-column label="门店名称" prop="name" width="250"></el-table-column>
				<el-table-column label="省份" prop="province" width="100"></el-table-column>
				<el-table-column label="城市" prop="city" width="100"></el-table-column>
				<el-table-column label="区县" prop="area" width="100"></el-table-column>
				<el-table-column label="精度" prop="lat" width="100"></el-table-column>
				<el-table-column label="纬度" prop="lng" width="100"></el-table-column>
				<el-table-column label="公司名称" prop="companyName" width="250"></el-table-column>
				<el-table-column label="具体地址" prop="unbrokenAddress"></el-table-column>

				<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination background :current-page="params.pageIndex" :page-size="params.pageSize" layout="prev, pager, next" :total="total" :pager-count="5" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script>
import request from '@/utils/request';
export default {
	data() {
		return {
			tableData: [],
			total: 0,
			params: {
				keyword: '',
				province: '',
				city: '',
				area: '',
				pageIndex: 1,
				pageSize: 10,
			},

			search: '',
		};
	},
	created() {
		this.ShopList();
	},
	methods: {
		ShopList() {
			var data = this.params;
			request({
				url: '/api/main/shoplist',
				method: 'post',
				data,
			})
				.then((result) => {
					var data = result.data.data;
					this.tableData = data.data;
					this.total = data.total;
				})
				.catch((err) => {
					console.log(err);
				});
		},
		handleEdit(index, row) {
			console.log(index, row);
		},
		handleDelete(index, row) {
			console.log(index, row);
		},
		handleSizeChange() {
			console.log('handleSizeChange');
		},
		handleCurrentChange(val) {
			this.params.pageIndex = val;
			this.ShopList();
			console.log(val);
		},
		queryClick() {
			this.params.pageIndex = 1;
			this.ShopList();
		},
	},
};
</script>

<style scoped>
[class*='el-col-'] {
	padding: 10px;
}
</style>
